<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2023-08-11 09:06:57
 * @LastEditors: wangwang 2723008256@qq.com
 * @LastEditTime: 2024-01-19 10:29:02
 * @FilePath: \jzjypc4.2\src\components\yuyueBox\yuyuebox.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="yuyueevm">
      <el-dialog  :visible.sync="dialogVisible" :before-close="handleClose" :width="width" top="30vh">
        <div class="yyevmContent">
          <div class="top">
            <img src="../../assets/img/activeNew/duigou.png" alt="">
            <h4>
                您的资源下载成功啦 !
            </h4>
          </div>
          <div class="bao">
            <p>一键获取</p>
            <h2>高中全学年完整学包</h2>
            <img src="../../assets/img/lijichakan.png" alt="">
          </div>
          <div class="msg">
            <div class="list" style="margin-top:22px"><span>教</span> <p>同步原创教学课件、精编精校教案、学案</p></div>
            <div class="list"><span>学</span> <p>一线教学专家同步教研课、专家同步教学课</p></div>
            <div class="list"><span>练</span> <p>开学摸底卷、月考卷、期中期末卷、精品同步 练习、单元检测卷</p></div>
            <div class="list"><span>精</span> <p>每个资源和课程都经过瑞鑫教研团队及一线专 家潜心打磨，层层审校</p></div>
          </div>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  props:['zykf_file_url'],
  inject: ["reload"],
    data(){
        return{
          dialogVisible:true,
          dqkfevm:'',//公众号二维码
          width:'800px',
        }
    },
    methods:{
      handleClose(){
        this.$emit('qwtcClose')
      }
    },
}
</script>

<style lang="less" scoped>
    .yuyueevm {
    /deep/.el-dialog__header {
      padding: 0;
    }
    /deep/.el-dialog {
      margin-top: 13vh !important;
      border-radius: 20px;
    }
    /deep/.el-dialog__body {
      padding: 0;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close{
        color: #FFF !important;
    }
    .yyevmContent {
      width: 800px;
      border-radius: 20px;
      .top {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 120px;
        border-radius: 20px 20px 0px 0px;
        background-image: url('../../assets/img/bmsbg.png');
        background-size: 100%;
        background-repeat: no-repeat;
        img{
            // margin-right: 10px;
            width: 40px;
        }
        h4{
          margin-left: 10px;
          font-size: 20px;
          color: #fff;
          text-align: center;
          line-height: 120px;
        }
      }
      .bao{
        display: flex;
        align-items: center;
        margin-top: 30px;
        p{
          margin-left: 60px;
          font-size: 16px;
          color: #333;
        }
        h2{
          font-size: 24px;
          margin-left: 18px;
          margin-right: 30px;
          color: #08A579;
        }
        img{
          position: relative;
          top: 8px;
          width: 103px;
        }  
      }
      .msg{
        margin-top: 25px;
        margin-left: 60px;
        width: 432px;
        height: 250px;
        border: 4px solid #08A579;
        border-radius: 12px;
        background: #F5FAF8;
        margin-bottom: 30px;
        .list{
          display: flex;
          margin-bottom: 24px;
          margin-left: 28px;
          span{
            display: inline-block;
            text-align: center;
            margin-right: 10px;
            line-height: 24px;
            width: 24px;
            height: 24px;
            background: linear-gradient(150deg, #08A579, #C4F255);
            border-radius: 4px;
            color: #FFF;
            font-size: 20px;
            font-weight: 600;
            font-family: fangsong;
          }
          p{
            width: 320px;
            font-size: 16px;
            font-family: Microsoft YaHei;
            color: #333333;
            line-height: 24px;
          }
        }
        
      }
      .signSuccessContent {
        overflow: hidden;
        .pic {
          margin: 0 auto;
          margin-bottom: 20px;
          width: 160px;
          height: 160px;
          border: 1px solid #dedede;
          img {
            width: 160px;
            height: 160px;
          }
        }
        p {
          text-align: center;
          width: 270px;
          margin: 0 auto;
          margin-bottom: 15px;
          text-align: center;
          font-size: 14px;
          color: #969799;
        }
      }
    }
  }
</style>